<template>
  <div class="box">
    <el-menu
      v-if="activeIndex && !ivr().hideNav"
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="onSelect"
    >
      <el-menu-item index="0">号码管理</el-menu-item>
      <!-- <el-menu-item index="1">外显规则</el-menu-item>
      <el-menu-item index="2">地区组</el-menu-item> -->
      <el-menu-item index="3">IVR语音导航</el-menu-item>
      <el-menu-item index="4">语音库</el-menu-item>
    </el-menu>
    <router-view></router-view>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, onUpdated, reactive, toRefs } from 'vue'
import { useRouter } from 'vue-router'
import ivr from '../store/modules/ivr'
const callRouter = '/app/call_router'
const routeMap = new Map([
  ['0', 'number_manage'],
  ['1', 'explicit_rules'],
  ['2', 'regional_group'],
  ['3', 'voice_nav'],
  ['4', 'voice-library']
])
const routerMapR = new Map([
  ['number_manage', '0'],
  ['explicit_rules', '1'],
  ['regional_group', '2'],
  ['voice_nav', '3'],
  ['voice-library', '4']
])
const state: any = reactive({
  activeIndex: '',
  cur: 'voiceNavVue'
})
const router = useRouter()
const updateRouter = () => {
  if (document.location.pathname === callRouter) {
    router.push('/app/call_router/number_manage')
    state.activeIndex = '0'
  } else {
    const name = (router.currentRoute as any)._value.name
    state.activeIndex = routerMapR.get(name)
  }
}
onMounted(() => {
  updateRouter()
})
onUpdated(() => {
  updateRouter()
})
const onSelect = (key: any) => {
  router.push(`/app/call_router/${routeMap.get(key)}`)
  state.activeIndex = key
}
const { activeIndex } = toRefs(state)
</script>
<style lang="stylus" scoped>
.box
  border-radius 10px
  .el-menu-demo
    margin-left 24px
    box-sizing border-box
  .el-menu
    height: 48px;
    box-sizing border-box
    margin: 8px 24px 0;
</style>
